<template>
	<base-page :bg-color="skinColor.color_bg_1" @submit="handleSubmit">
		<header>
			<form-header text="staticData-subsection分段器静态数据"></form-header>
		</header>
		<cell v-for="(item, index) in staticSubsectionForm">
			<view class="border-bottom-1 y-flex y-row y-align-center page-padding-gap pt-20 pb-20" :style="{'border-bottom-color': skinColor.color_gap_1}">
				<input class="fs-28 y-flex-1"
				:disabled="disabled"
				:style="{color: skinColor.color_1}"
				type="text" v-model="item.value" placeholder="请输入分段名称" />
				<com-icon name="close" size="30rpx" :color="skinColor.color_2" :disabed="disabed" @click="handleCloseSubsection(index)"></com-icon>
			</view>	
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleAddSubsection">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加分段器</text>
			</view>
		</cell>
		<header>
			<form-header text="request请求"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(requestForm)">
			<form-item
			closeable
			v-model="requestForm[key]"
			:type="request[key].type"
			:label="request[key].label"
			:disabled="disabled"
			@close="handleClose('requestForm', key)"></form-item>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleRequestSelect">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加请求属性</text>
			</view>
		</cell>
		<header>
			<form-header text="dynamicData-subsection分段器动态数据"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(dynamicSubsectionForm)">
			<form-item v-model="dynamicSubsectionForm[key]" type="rule" :label="(data[key] ? data[key].label : dynamic[key].label) + '规则'" :disabled="disabled"></form-item>
		</cell>
		<header>
			<form-header text="dynamicData-list列表动态数据"></form-header>
		</header>
		<template v-for="(item,index) in dynamicListForm">
			<header>
				<form-header :text="'动态列表 - ' + (index + 1)">
					<template #right>
						<com-icon name="close" size="30rpx" :color="skinColor.color_2" :disabed="disabed" @click="handleCloseDynamicList(index)"></com-icon>
					</template>
				</form-header>
			</header>
			<cell v-for="(key, i) in Object.keys(item)">
				<form-item v-model="item[key]" type="rule" :label="(data[key] ? data[key].label : dynamic[key].label) + '规则'" :disabled="disabled"></form-item>
			</cell>
		</template>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleAddDynamicList">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加动态数据</text>
			</view>
		</cell>
	</base-page>
</template>

<script>
	import FormItem from '../components/FormItem.vue'
	import FormHeader from '../components/Header.vue'
	import { Component, Request } from '@/assets/js/interface.js'
	import BasePage from './base.vue'
	export default {
		inject: ['selectOptions', 'getSkinColor', 'deleteProperty', 'getQuery', 'deepClone', 'getType'],
		components: { BasePage, FormItem, FormHeader },
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			query () {
				return this.getQuery()
			},
			disabled () {
				return this.query.disabled
			},
			type () {
				return this.getType()
			},
			data () {
				return Component[this.type].data
			},
			dynamic () {
				return Component[this.type].dynamicData
			},
			staticData () {
				const obj = {}
				Object.keys(this.data).forEach(key => {
					obj[key] = this.data[key].value
				})
				return obj
			},
			dynamicData () {
				const obj = {}
				Object.keys(this.dynamic).forEach(key => {
					obj[key] = this.dynamic[key].value
				})
				return {...obj, ...this.staticData}
			},
			request () {
				return Request
			},
			originForm () {
				return this.query.form
			}
		},
		data () {
			return {
				staticSubsectionForm: [],//静态数据分段器列表
				staticListForm: [],//静态数据列表
				requestForm: {},//请求
				dynamicSubsectionForm: {},//动态分段器数据
				dynamicListForm: []//动态列表数据
			}
		},
		created () {
			Object.keys(this.dynamic).forEach(key => {
				this.dynamicSubsectionForm[key] = this.dynamic[key].value
			})
			if ( this.originForm ) {
				this.requestForm = this.originForm.request || {}
				const staticData = this.originForm.staticData || {}
				const subsection = staticData.subsection || []
				this.staticListForm = staticData.list || []
				subsection.forEach(item => {
					this.staticSubsectionForm.push({value: item})
				})
				const dynamicData = this.originForm.dynamicData || {}
				const dynamicSubsection = dynamicData.subsection || {}
				Object.keys(this.dynamicSubsectionForm).forEach(key => {
					this.dynamicSubsectionForm[key] = dynamicSubsection[key] || this.dynamicSubsectionForm[key]
				})
				const dynamicList = dynamicData.list || []
				dynamicList.forEach(item => {
					this.dynamicListForm.push(Object.assign({}, this.dynamicData, item))
				})
			}
		},
		methods: {
			handleClose (formName, k) {
				this[formName] = this.deleteProperty(this[formName], k)
			},
			handleAddSubsection () {
				this.staticSubsectionForm.push({value: ''})
			},
			handleCloseSubsection (index) {
				this.staticSubsectionForm.splice(index, 1)
			},
			handleAddDynamicList () {
				const item = this.deepClone(this.dynamicData)
				this.dynamicListForm.push(item)
			},
			handleCloseDynamicList (i) {
				this.dynamicListForm.splice(i, 1)
			},
			handleRequestSelect () {
				if ( this.disabled ) return
				this.selectOptions({
					title: '选择添加的属性',
					actions: Object.keys(this.request).filter(key => Object.keys(this.requestForm).indexOf(key) == -1).map(key => this.request[key].label),
					success: res => {
						const keys = Object.keys(this.request)
						const index = keys.findIndex(key => this.request[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this.requestForm, key, this.request[key].value)
					}
				})
			},
			handleSubmit (data) {
				this.$emit('submit', Object.assign({}, data, { 
					staticData: {
						subsection: this.staticSubsectionForm.map(s => s.value),
						list: this.staticListForm
					},
					request: this.requestForm,
					dynamicData: {
						subsection: this.dynamicSubsectionForm,
						list: this.dynamicListForm
					},
				}))
			}
		}
	}
</script>

<style>
</style>